<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>活动详情</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="vendor/bootstrap-3.3.5-dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/nav_footer.css" />
		<script type="text/javascript" src="vendor/jquery1.9.min.js"></script>
		<script type="text/javascript" src="vendor/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
		<script src="vendor/jquery.validate-1.13.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/nav_footer.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#content {
				max-width: 960px;
				margin: 0 auto;
				padding: 0 0 20px;
			}

			#active-content {
				text-indent: 2em;
			}

			#div-comment {
				padding: 0 10px;
				border-top: 1px solid black;
			}

			#comment-area {
				margin: 20px 0 0;
				border-top: 1px solid #B3B3B3;
			}

			#comment-area li {
				border-top: 1px solid #eee;
				padding: 10px 5px 5px;
			}

			#but-comeback {
				float: right;
				width: 60px;
				padding: 2px;
				color: #fff;
				background-color: #D35652;
				border: 1px solid #ac2925;
				border-radius: 4px;
			}

			#but-comeback:hover {
				background-color: #CE433F;
			}

			#but-comeback:active {
				background-color: #C9302C;
			}

			#but-comeback:after {
				content: "";
				display: block;
				clear: both;
			}

			#but-collection {
				float: right;
				width: 80px;
				padding: 2px;
				color: #fff;
				background-color: #568BB9;
				border: 1px solid #285e8e;
				border-radius: 4px;
				margin-right: 10px;
			}

			#but-collection:hover {
				background-color: #437EB1;
			}

			#but-collection:active {
				background-color: #3071A9;
			}
			/*#but-comeback a {
				text-decoration: none;
				color: white;
			}*/

			#but-submit {
				width: 50px;
				padding: 3px;
				background-color: #568BB9;
				border: 1px solid #285e8e;
				border-radius: 4px;
				color: white;
			}

			#but-submit:hover {
				background-color: #437EB1;
			}

			#but-submit:active {
				background-color: #3071A9;
			}
			#content span{
				margin: 0 5px;
			}
			#but-loadmore {
				display: block;
				width: 80px;
				padding: 3px;
				margin: 0 auto;
			}
		</style>

	</head>

	<body>

		<nav class="navbar navbar-inverse" role="navigation">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
					<a class="navbar-brand" href="#">
						<img alt="LOGO" src="#">
					</a>

				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<a href="#">进入邀约</a>
						</li>

					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li>
							<form class="navbar-form navbar-left" role="search">
								<div class="form-group">
									<input type="text" class="form-control" placeholder="寻找邀约">
								</div>
								<button type="submit" class="btn btn-default">查找</button>
							</form>
						</li>
						<li id="li-login">
							<a href="#" id="nav-login">
								登录/注册
							</a>
						</li>
						<!--<li id="li-userName">
							<a id="userName" title="进入个人空间">你好，小明</a>
						</li>
						<li id="cancel">
							<a>注销</a>
						</li>-->

					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid -->
		</nav>

		<div id="content">
			<button id="but-comeback">返回</button>
			<button id="but-collection">收藏</button>
			<h3>活动名称</h3>
			<p>发布人:<span>小明</span></p>
			<p>发布时间:<span>2016-1-1</span></p>
			<p id="active-content">活动内容</p>
			<div id="div-comment">
				<p>评论人：<span>小米</span></p>
				<textarea id="text-comment" name="comment" rows="4" cols="100%" placeholder="180字内"></textarea>
				<br />
				<button id="but-submit">提交</button>
				<div id="comment-area">
					<h4>评论:</h4>
					<ul>
						<li>
							<p><span>小明:</span>评论内容</p>
						</li>
						<li>
							<p><span>小明:</span>评论内容</p>
						</li>
						<li>
							<p><span>小明:</span>评论内容</p>
						</li>
						<li>
							<p><span>小明:</span>评论内容</p>
						</li>
						<li>
							<p><span>小明:</span>评论内容</p>
						</li>
					</ul>
					<button id="but-loadmore">加载更多</button>
				</div>
			</div>
		</div>
		<footer>
			<p>
			联系方式</p>
			<p>
				QQ/微信：352329872</p>
			<p>
				邮箱：helloyoucan@163.com</p>
			<p>
				版权所有&#169;广州商学院14级商软1班终极小组-2016
			</p>
		</footer>
		<!-- Modal登录 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title"></h4>
					</div>
					<div class="modal-body">
						<div id="div-login-sign">

							<ul id="ul-tap">
								<li class="active">登录</li>
								<li>注册</li>
							</ul>
							<div id="all-tap">
								<div id="tap-login">
									<form action="#" method="post" id="login-from">
										<input type="text" placeholder="邮箱" id="login-email" name="email" />
										<p></p>
										<input type="password" placeholder="密码(6~18位，必须为字母与数字组合)" id="login-password" name="password" />
										<p></p>
										<input type="submit" value="登录 " />
										<p id="login-failed">登录失败</p>
									</form>
								</div>
								<div id="tap-sign_in">
									<form action="#" method="post" id="sign-form">
										<input type="text" placeholder="昵称(不超过8个字符长度)" id="sign-name" name="username" />
										<p></p>
										<input type="text" placeholder="邮箱" id="sign-email" name="email" />
										<p></p>
										<input type="password" placeholder="密码(6~18位，必须为字母与数字组合)" id="sign-password" name="password" />
										<p></p>
										<input type="submit" value="注册 " />
										<p id="sign-success">注册成功!请进行登录</p>
										<p id="sign-failed">注册失败!请重新注册</p>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//设置内容区域最小高度
			var winHeight;
			setContentHig();
			$(window).resize(function() {
				setContentHig();
			});

			function setContentHig() {
				if (window.innerHeight)
					winHeight = window.innerHeight;
				else if ((document.body) && (document.body.clientHeight))
					winHeight = document.body.clientHeight;
				winHeight = winHeight > 600 ? winHeight : 600;
				$("#content").css({
					"min-height": winHeight - 72 - 120
				});
			}
			/*返回上一页*/
			$("#but-comeback").click(function() {
				history.back(-1);
			});
			/*收藏*/
			$("#but-collection").click(function() {
				if ($(this).text()==="收藏") {
					$(this).html("取消收藏");
				} else{
					$(this).html("收藏");
				}
			});
			/*评论*/
			$("#but-submit").click(function() {
				$("#text-comment").val(""); /*清空*/
			});
			/*加载更多*/
			$("#but-loadmore").click(function() {});
		</script>
	</body>

</html>
